<template>
  <div>
    <header-comm></header-comm>
    <div class="bcg">
      <div class="custom-tree-container">
        <div class="h_tit">
          <h3>产品样本数据采集</h3>
          <!-- <p>创建样本，可以选择样本素材库中内容</p> -->
        </div>
        <div class="block blockleft" >
          <!-- <p>产品样本素材</p>
        <div class="xzyy">
          <span>选择语言：</span>
          <a-checkbox-group v-model="checkList">
            <a-checkbox value="中文">中文</a-checkbox>
            <a-checkbox value="英文">英文</a-checkbox>
            <a-checkbox value="日文">日文</a-checkbox>
            <a-checkbox value="俄文">俄文</a-checkbox>
          </a-checkbox-group>
          </div>-->
          <a-divider orientation="left">数据源样本</a-divider>
          <div class="add_in">
            
            <span class="search_ico">
              <a-icon type="search" />
            </span>
            <a-select
              showSearch
              :value="khvalue"
              placeholder="请输入样本名称"
              style="width: 300px"
              :defaultActiveFirstOption="false"
              :showArrow="false"
              :filterOption="false"
              @search="khmcSearch"
              @change="khmcChange"
              allowClear
              :notFoundContent="null"
            >
              <a-select-option
                v-for="(item,i) in dataSource"
                :key="i"
                :value="item.dwmc"
                @click="getTreeStructure(item,i)"
              >{{item.dwmc}}</a-select-option>
            </a-select>
          </div>
          <el-tree
            :data="data"
            ref="tree"
            :props="defaultProps"
            node-key="id"
            show-checkbox
            :expand-on-click-node="false"
            @check-change="handleCheckChange"
            :check-strictly="true"
          ></el-tree>
          <div class="button1">
            <!-- <a-button class="btn1" @click="getCheckedNodes" type="primary">加入</a-button> -->
               <a-popconfirm
                class="btn1"
                  title="确认加入吗?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="getCheckedNodes"
                  @cancel="cancel"
                >
                  <!-- <a href="#">加入</a> -->
                  <a-button class="btn1"  type="primary">>>>加入</a-button>
                </a-popconfirm>
            <div class="add_spin" v-if="add_spin">
              <a-spin class />
            </div>
            <!-- <a-button class="btn1" @click="resetChecked" type="primary">清空</a-button> -->
            <!-- <el-button @click="resetChecked">清空</el-button> -->
          </div>
        </div>

        <div class="block blockright" >
          <a-divider orientation="left">目标样本</a-divider>
        <div class="spbin_mb_box" v-if="add_spin">
            <a-spin tip="加入中，请耐心等候....">
            <div class="spin-content">
            </div>
          </a-spin>
        </div>
          <div class="mb_select">
            
            <span class="search_ico">
              <a-icon type="search" />
            </span>

            <a-select
              showSearch
              :value="mbvalue"
              placeholder="请输入样本名称"
              style="width: 300px"
              allowClear
              :defaultActiveFirstOption="false"
              :showArrow="false"
              :filterOption="false"
              :notFoundContent="null"
              @search="mbmcSearch"
              @change="mbmcChange"
            >
              <a-select-option
                v-for="(item,index) in Mubiaodata"
                :key="index"
                :value="item.dwmc"
                @click="getTreeStructure_mb(item)"
              >{{item.dwmc}}</a-select-option>
            </a-select>
          </div>
          <el-tree
            :data="mbdata"
            ref="tree"
            :props="defaultProps"
            node-key="id"
            :expand-on-click-node="false"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <!-- <el-button
                  type="text"
                  v-if="data.ids=='0'"
                  size="mini"
                  @click="() => remove(node, data)"
                >删除</el-button>-->
                <a-popconfirm
                  title="确认删除吗?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="() => remove(node, data)"
                  @cancel="cancel"
                  
                >
                  <a href="#">删除</a>
                </a-popconfirm>
              </span>
            </span>
          </el-tree>
          <!-- <el-tree
          :data="treeDatatwo"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          </el-tree>-->

          <div class="button2">
           <!-- <a class="del" @click="()=>toybgl()">样本管理</a> -->

            <!-- <router-link to="/ybgl?title=样本管理"> -->
              <a-button  @click="toybgl" class="btn3" type="primary">样本管理</a-button>
            <!-- </router-link> -->
            <!-- <a-button class="btn4" @click="clearmbData">清空样本</a-button> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import qs from "qs";
let id = 1000;
export default {
  data() {
    const data = [];
    const newData = [];
    return {
      Canpush: false,
      khvalue: "请输入样本名称",
      mbvalue: "请输入样本名称",
      dataSource: [],
      Mubiaodata: [],
      datakhId: "",
      mbmcdatakhId: "",
      filename: "",
      add_spin: false,
      // treeData: [],
      // treeDatatwo: [],
      data: JSON.parse(JSON.stringify(data)),
      // data: JSON.parse(JSON.stringify(data)),
      mbdata: [],
      newData: [],
      NewDataid: [],
      // newData: JSON.parse(JSON.stringify(newData)),

      //获取值
      defaultProps: {
        children: "children",
        label: "label"
      },
      //获取值

      checkList: ["中文"],
      pushNewData: [],
      ysj_data: "",
      mby_data: ""
    };
  },
  components: {
    headerComm
  },
  // watch: {
  //   checkedKeys(val) {
  //     console.log("onCheck", val);
  //     this.pushNewData = val;
  //   }
  // },
  methods: {
    //获取数据源样本
    getkhmc(value) {
      this.axios
        .post(
          "yangben/getYbList.php",
          qs.stringify({ pageSize: 10, dwmc: value })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.dataSource = res.data.result.data;
            console.log(this.dataSource);
            if (res.data.result.length == 0) {
              this.dataSource = [];
            }
          } else {
            this.dataSource = [];
          }
        });
    },
    //数据源名称查询
    khmcChange(value) {
      console.log(value);
      this.khvalue = value;
      for (var i = 0; i < this.dataSource.length; i++) {
        if (this.khvalue == this.dataSource[i].dwmc) {
          this.datakhId = this.dataSource[i].sqdwid;
        }
      }
      if (this.khvalue == undefined) {
        this.datakhId = "";
        this.data = [];
      }
      this.getkhmc();
      console.log(this.datakhId);
      if (this.khvalue == this.mbvalue) {
        // alert("数据源样本不能和目标样本一致,请重新选择");
        this.$notification["error"]({
          message: "失败",
          description: "数据源样本不能和目标样本一致,请重新选择"
        });
        this.khvalue = "";
        this.datakhId = "";

        this.data = [];
      }
    },
    khmcSearch(value) {
      this.getkhmc(value);
    },

    khmc(input, option) {
      return (
        option.componentOptions.children[0].text
          .toUpperCase()
          .indexOf(input.toUpperCase()) >= 0
      );
    },
    //获取目标样本数据
    getMubiao(value) {
      this.axios
        .post(
          "yangben/getYbList.php",
          qs.stringify({ pageSize: 10, dwmc: value })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.Mubiaodata = res.data.result.data;
            console.log(this.Mubiaodata);
            if (res.data.result.length == 0) {
              this.Mubiaodata = [];
            }
          } else {
            this.Mubiaodata = [];
          }
        });
    },
    //  confirm(e) {
    // console.log(e);
    // this.$message.success('Click on Yes');
    // },
    cancel(e) {
      // console.log(e);
      // this.$message.error('Click on No');
    },
    mbmcChange(value) {
      this.mbvalue = value;
      for (var i = 0; i < this.Mubiaodata.length; i++) {
        if (this.mbvalue == this.Mubiaodata[i].dwmc) {
          this.mbmcdatakhId = this.Mubiaodata[i].sqdwid;
        }
      }
      console.log(this.mbmcdatakhId);
      if (this.mbvalue == undefined) {
        this.mbmcdatakhId = "";
        this.mbdata = [];
      }
      this.getMubiao();
      if (this.mbvalue == this.khvalue) {
        // alert("目标样本不能和数据源样本一致,请重新选择");
        this.$notification["error"]({
          message: "失败",
          description: "目标样本不能和数据源样本一致,请重新选择"
        });
        this.mbvalue = "";
        this.mbmcdatakhId = "";
        this.mbdata = [];
      }
    },
    mbmcSearch(value) {
      this.getMubiao(value);
    },

    mbmc(input, option) {
      return (
        option.componentOptions.children[0].text
          .toUpperCase()
          .indexOf(input.toUpperCase()) >= 0
      );
    },
   
    //数据列表--源数据
    getTreeStructure(e) {
      // console.log(e.filename)+
      this.ysj_data = e;
      if (e.dwmc == this.mbvalue) {
        return false;
      }
      this.axios
        .post(
          "yangben/GetTreeStructure.php",
          qs.stringify({ filename: e.filename, dwmc: e.dwmc })
        )
        .then(res => {
          console.log(res);
          this.pushNewData = [];
          this.data = res.data.menu;
          for (var i = 0; i < this.data.length; i++) {
            for (var j = 0; j < this.mbdata.length; j++) {
              if (this.data[i].title == this.mbdata[j].title) {
                this.data[i].disabled = true;
              }
            }
          }
        });
    },
    //数据列表--目标样本

    getTreeStructure_mb(e) {
      if (e.dwmc == this.khvalue) {
        return false;
      }
      this.mby_data = e;
      this.axios
        .post(
          "yangben/GetTreeStructure.php",
          qs.stringify({ filename: e.filename, dwmc: e.dwmc })
        )
        .then(res => {
          console.log(res);
          this.mbdata = res.data.menu;
          // console.log(this.mbdata);
          this.getTreeStructure(this.ysj_data);
        });
      this.filename = e.filename;
    },
    //ssssss
    remove(node, data) {
      console.log(data);
      console.log(node);
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.fenleiID === data.fenleiID);
      // children.splice(index, 1);
      this.axios
        .post(
          "yangben/deleteSampleMenu.php",
          qs.stringify({
            filename: this.filename,
            fenleiId: data.fenleiID,
            ids: data.ids
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            children.splice(index, 1);
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg,
              duration: 1.5
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },
  toybgl() {
      this.$store.state.filename = this.filename;
      this.$store.state.dwmc = this.mbvalue;
      this.$store.state.sqdwid = this.mbmcdatakhId;
      this.$router.push("/ybgl");
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              Delete
            </el-button>
          </span>
        </span>
      );
    },
    // sssss
    //创建样本
    //     getCheckedAll(){

    //  return this.flatState.filter(function (e) {
    //     if(e.node.indeterminate){
    //         return e.node.indeterminate
    //     }
    //     return e.node.checked
    // }).map(function (e) {
    //     return e.node
    // })

    // },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
      console.log(this.mbdata);
      for (var i = 0; i < this.mbdata.length; i++) {
        // this.title.push(this.mbdata[i].title);
        if (this.mbdata[i].title == data.title) {
          // alert("样本重复，请重新选择");
          this.$notification["error"]({
            message: "失败",
            description: "样本重复，请取消后重新添加",
            duration: 1.5
          });
          return false;
        }
      }
      if (checked == true) {
        this.Canpush = true;
        // console.log(this.mbdata);
        this.pushNewData.push(data);
        sessionStorage.setItem(
          "flpushNewData",
          JSON.stringify(this.pushNewData)
        );
      } else {
        for (var i = 0; i < this.pushNewData.length; i++) {
          if (data == this.pushNewData[i]) {
            // this.pushNewData[i].remove(data)
            this.pushNewData.splice(i, 1);
          }
        }
        sessionStorage.setItem(
          "flpushNewData",
          JSON.stringify(this.pushNewData)
        );
      }
      console.log(this.pushNewData);
    },
    
    getCheckedNodes() {
      this.NewDataid = [];
      if (!this.newData.length) {
        this.Canpush = true;
      }
      if (this.Canpush) {
        if (this.mbvalue != "") {
                this.newData = this.pushNewData;
                this.mbdata = this.mbdata.concat(this.newData);
                for (var i = 0; i < this.mbdata.length; i++) {
                  this.mbdata[i].id = i;
                }
          for (var j = 0; j < this.pushNewData.length; j++) {
            this.NewDataid.push(this.pushNewData[j].fenleiID);
          }
          this.add_spin = true;
          this.axios
            .post(
              "yangben/CreateYanben.php",
              qs.stringify({
                source_filename: this.datakhId,
                source_data: this.NewDataid,
                target_filename: this.mbmcdatakhId
              })
            )
            .then(res => {
              console.log(res);
              if (res.data.code == 303) {
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg
                });
                this.add_spin = false;
                this.getTreeStructure(this.ysj_data);
                this.getTreeStructure_mb(this.mby_data);
              } else {
                this.add_spin = false;

                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg
                });
              }
            });

        } else {
          this.$notification["error"]({
            message: "失败",
            description: "目标样本不能为空"
          });
          return false;
        }
      }
    }
  },

  created() {
    // this.getTreeStructure();

    this.getkhmc();
    this.getMubiao();
  }
};
</script>

<style lang='less' >
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-container {
  position: absolute;
  top: 138px;
     width: 90%;
    left: 10%;
  display: inline-block;
  text-align: center;
  margin-bottom: 50px;
  min-height: 600px;
}
.block {
  position: absolute;
  display: inline-block;
  padding: 20px;
  width: 39%;
  min-height: 703px;
  // border: 1px solid #ccc;
  background-color: #fff;
  // margin:0 -5px;
.add_in{
  text-align: left;
}
.mb_select{
  text-align: left;

}
  .button1 {
    position: absolute;
    top: 32%;
    right: -5%;
    transform: translateY(-50%);
    button {
      position: absolute;
      // top: 50%;
      padding: 5px 24px;
    }
    .btn1 {
      // right: -54px;
    }
    .btn2 {
      top: 50px;
    }
    .add_spin {
      background: rgba(255, 255, 255, 0.7);
      position: absolute;
      z-index: 999;
      width: 54px;
      height: 32px;
      left: 0px;
      top: 0px;
      border-radius: 2px;
      text-align: center;
      .ant-spin-dot {
        position: absolute;
        top: 6px;
        left: 16px;
      }
    }
  }
  .button2 {
    position: absolute;
    top: 77px;
    right: 102px;
    transform: translateY(-50%);
    button {
      position: absolute;
      // top: 50%;
      padding: 5px 10px;
    }
    // .btn3 {
    // }
    .btn4 {
      right: -79px;
      top: 50px;
    }
  }
.el-tree{
  top: 30px;
}
  .el-tree__empty-text {
    width: 100px;
  }

  .xzyy {
    text-align: left;
    margin: 10px 0;
    .el-checkbox-group {
      display: inline-block;
      margin: 20px;
    }
    .el-checkbox {
      margin-right: 15px;
    }
  }
}
.blockleft {
  left: 0;
}
.blockright {
  right: 10%;
}
.myp {
  height: 6px;
}
.h_tit {
  position: absolute;
  top: -65px;
  left: 0;
  text-align: left;
  h3 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    color: rgba(76, 75, 75, 0.85);
  }
  p {
    margin: 0;
  }
}
.ant-tree li {
  text-align: left;
}

.add_in {
  .ant-select-selection__rendered {
    margin-left: 33px;
  }
}
.mb_select {
  .ant-select-selection__rendered {
    margin-left: 33px;
  }
}
.search_ico {
  position: relative;
  left: 22px;
  z-index: 999;
}
.spbin_mb_box{
        width: 100%;
   height: 100%;
    position: absolute;
    background: rgba(68, 161, 248, 0.2);
    z-index: 10;
    top: 0;
    left: 0;
 
}
</style>
